<template>
	<view class="app_Cont">
		<view class="showCont" v-if="showCont">
			<view class="pageTop">
				<view class="headCont">
					<view class="headTop">
						<image class="headFamily" src="/static/img/family.png" ></image>
						<view class="headDes">您最贴心的求职帮手</view>
					</view>
					<view class="serchCont">
						<view class="serchInput">
							<input v-model="accreditation_name" placeholder="请输入办证名称" />
							<view class="serchBtn iconfont icon-sousuo" @click="serchFn"></view>
						</view>
					</view>
				</view>
			</view>
			<scroll-view class="workCont" scroll-y="true" @scrolltolower="scrolltolower" lower-threshold="10" >
				<view class="workItem" @click="detailFn(item)" :key="index" v-for="(item,index) in listArr">
					<view class="workImg">
						<image :src="item.accreditation_cover"></image>
					</view>
					<view class="workInfo">
						<view class="workName">{{item.accreditation_name}}</view>
						<view class="serveNum">销量 {{item.accreditation_sales}}单</view>
						<view class="workPrice">¥<text>{{item.accreditation_money}}</text></view>
					</view>
				</view>
				<noData v-if="listArr.length==0&&!isChange"></noData>
				<loadMore v-if="!isChange&&last_page==page"></loadMore>
			</scroll-view>
		</view>
		<tabBar></tabBar>
		<load v-if="!showCont||isChange"></load>
	</view>
</template>

<script>
	import tabBar from '@/components/tabBar.vue'
	import api from '@/http/api.js'
	import load from '@/components/load.vue'
	import noData from '@/components/noData.vue'
	import loadMore from '@/components/loadMore.vue'
	export default {
		components:{tabBar,load,noData,loadMore},
		
		data() {
			return {
				showCont:false,
				page:1,
				per_page:10,
				last_page:0,
				accreditation_name:'',
				listArr:[
					
				],
				isChange:false,
			};
		},
		onShareAppMessage(res) { //发送给朋友
			return {
				title: '鲸领航系统分享',
				imageUrl: 'https://whalenav.oss-cn-chengdu.aliyuncs.com/uploads/images/20241211/bde6c10f267dca4630622686023ae395bf821eba.jpg',
			}
		},
		onShareTimeline(res) {//分享到朋友圈
			return {
				title: '鲸领航系统分享',
				imageUrl: 'https://whalenav.oss-cn-chengdu.aliyuncs.com/uploads/images/20241211/bde6c10f267dca4630622686023ae395bf821eba.jpg',
			}
		},
		methods:{
			scrolltolower(){
				if(this.page<this.last_page||true){
					this.page++
					this.isChange = true
					
					this.getData()
				}
			},
			detailFn(item){
				uni.navigateTo({
					url: 'obtainDetail/obtainDetail?id='+item.accreditation_content_id
				});
			},
			serchFn(){
				this.listArr = []
				this.page = 1
				this.isChange = true
				this.last_page = 0
				this.getData()
			},
			getData(){
				let data = {
					page:this.page,
					per_page:this.per_page,
					accreditation_name:this.accreditation_name,
				}
				api.getRequst(data,'/api/accreditation').then((res)=>{
					if(res.code==1){
						let arr = res.data.data
						for(let item of arr){
							this.listArr.push(item)
						}
						console.log(this.listArr)
						this.last_page = res.data.last_page
					}
					this.showCont = true
					this.isChange = false
				})
			}
		},
		onLoad() {
			this.getData()
		}
	}
</script>

<style lang="scss">
	.showCont{
		box-sizing: border-box;
		height: 100vh;
		padding-bottom: 120rpx;
		display: flex;
		flex-direction: column;
	}
	.pageTop{
		width: 100%;
		background-image: linear-gradient(to bottom,#3f55cc,#f8f8f8);
	}
	.headCont{
		padding-top: 100rpx;
		.headTop{
			width: 100%;
			height: 60rpx;
			display: flex;
			align-items: center;
			font-size: 24rpx;
			padding-left: 3%;
			box-sizing: border-box;
			color: #fff;
			.headFamily{
				width: 150rpx;
				height: 60rpx;
			}
		}
		.serchCont{
			display: flex;
			align-items: center;
			padding: 30rpx 4%;
			box-sizing: border-box;
			.serchInput{
				background-color: #fff;
				display: flex;
				align-items: center;
				padding: 0rpx 15rpx;
				padding-left: 40rpx;
				height: 80rpx;
				box-sizing: border-box;
				flex: 1;
				width: 100rpx;
				border-radius: 50rpx;
				.serchBtn{
					background-image: linear-gradient(to right bottom,#9ecffd,#3f55cc);
					color: #fff;
					height: 60rpx;
					font-size: 30rpx;
					padding: 0 40rpx;
					border-radius: 50rpx;
					margin-left: 30rpx;
					line-height: 60rpx;
				}
				input{
					flex: 1;
					width: 100rpx;
				}
			}
		}
	}
	.workCont{
		width: 100%;
		height: 500rpx;
		flex: 1;
		padding: 20rpx 4% 30rpx;
		overflow-y: auto;
		box-sizing: border-box;
		.workItem{
			background-color: #fff;
			padding: 30rpx 4% 20rpx;
			margin-bottom: 20rpx;
			border-radius: 10rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			.workImg{
				width: 120rpx;
				height: 120rpx;
				font-size: 0;
				border-radius: 10rpx;
				overflow: hidden;
				margin-right: 30rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.workInfo{
				width: 100rpx;
				flex: 1;
				height: 120rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.workName{
					font-weight: bold;
					font-size: 28rpx;
				}
				.serveNum{
					color: #999;
					font-size: 24rpx;
				}
				.workPrice{
					font-size: 24rpx;
					color: #ff5757;
					text{
						font-size: 30rpx;
					}
				}
			}
		}
	}
</style>
